<div class="layui-fluid">
  <div class="layui-row">
    <div class="layui-col-xs12">
      <div class="layui-card">
        <div class="layui-card-header">注册用户信息列表</div>
        <div class="layui-card-body userList ">
          
          <!-- 查询层 -->
          <div class="layui-row">
				    <div class="layui-col-md9">
				      
				      
					 </div>   
				    <div class="layui-col-md3">
				      <!-- <button v-on:click="loadData" class="layui-btn layui-btn-normal">查询</button> -->
				    </div>
				  </div>
				  
				  
				  <!-- 列表层 -->
				  <table class="layui-table">
					  <colgroup>
					    <col width="50">
					    <col width="200">
					    <col width="120">
					    
					  </colgroup>
					  <thead>
					    <tr>
					      <th>ID</th>
					      <th>用户名</th>
					      <th>密码</th>
					      <th>操作</th>
					    </tr> 
					  </thead>
					  <tbody>
					  	
					    <tr v-for="item in dataSource">
					      <td>{{item.id}}</td>
					      <td>{{item.name}}</td>
					      <td>{{item.password}}</td>
					      <td>
					      	<button style="width:60px;height:30px;text-align:center;line-height:30px;" v-on:click="removeData" data-id="{{item.id}}" class="layui-btn layui-btn-danger">移除</button>
					      </td>
					    </tr>
					    
					  </tbody>
					</table>
					
					<div id="laypageDemo"></div>
				  
         
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 脚本 -->
<script>
	var $ = layui.jquery;
	var vm = new Vue({
		el : '.userList' ,
		data : {
			
			movieName : '',
			
			dataSource : [{}]
		} ,
		
		methods: {
			
			removeData : function(e){
				
				if(!confirm('您确定要删除吗？')){
					return;
				}
				
				this.$http({
                    url:'user/delete.do?id=' + e.target.dataset.id,
                    data:{
                    	
                    }
                }).then(function(res){
					var data = res.data;
					if(data.code != 0){
						alert("后台出现错误，请核实！");
						return;
					}
					alert('删除成功！');
					location.reload();
                });
			}
			
			,loadData : function(page,rows){
				page = page ? page : 1;
				rows = rows ? rows : 5
				
				this.$http({
                    url:'user/list.do',
                    data:{
                    	page : page,
                    	rows : rows,
                    }
                }).then(function(res){

					var data = res.data;
					
					//渲染数据
					vm.dataSource = data.rows;
					//计算分页
                    layui.use('laypage', function(){
              		  var laypage = layui.laypage;
              		  
              		  //执行一个laypage实例
              		  laypage.render({
              		    elem: 'laypageDemo' //注意，这里的 test1 是 ID，不用加 # 号
              		    ,count: data.total //数据总数，从服务端得到
              		    ,limit: 5
              		    ,curr : page
	              		,jump: function(obj, first){
	              		    
	              		    //首次不执行
	              		    if(!first){
	              		      vm.loadData(obj.curr,obj.limit);
	              		      
	              		    }
	              		  	
	              		    
	              		    
	              		  }
              		  });
              		});
                   
                });
				
			} ,
			
			
		}
	});
	
	vm.loadData();
	
	
	
  
</script>
<!-- 样式 -->
<style scoped>

</style>